<template>
	<div>
		<router-link to="/" tag="div" class="header-abs" v-show="showAbs">
		  <div class="iconfont back-icon">&#xe624;</div>
		</router-link>
		<div class="header-fixed" v-show="!showAbs" :style="opacityStyle">
			<router-link to='/'>
				<div class="iconfont header-back">&#xe624;</div>
	     	</router-link>
			景点详情
		</div>
	</div>
</template>

<script>
	export default {
		name: 'DetailHeader',
		data () {
			return {
				showAbs: true,
				opacityStyle: {
					opacity: 0
				}
			}
		},
		methods: {
			handleScroll () {
			const top = document.documentElement.scrollTop
//			console.log( document.documentElement.scrollTop)
             console.log(  top )
			if (top > 60 ) {
				let opacity = top / 140
				 console.log(  opacity )
				opacity = opacity > 1 ? 1:opacity
				this.opacityStyle = { opacity }
				console.log( this.opacity )
				this.showAbs = false
			} else {
				this.showAbs = true
			 }
		  }
		},
        activated () {
			window.addEventListener('scroll', this.handleScroll)
		},
		deactivated () {
			window.removeEventListener('scroll', this.handleScroll)
		}
	}
</script>

<style lang="stylus" scoped>
   @import '~styles/varibles.styl'
   .header-abs
     position: absolute
     top: 10px
     left: 10px
     width: 40px
     height: 40px
     line-height: 40px
     border-radius: 20px;
     background: rgba(0, 0, 0 .8);
     text-align: center
     .back-icon
       color: #fff
       font-size: 20px
    .header-fixed
      position: fixed
      top:0
      left:0
      right:0
      overflow:hidden
      height:$headerHeight
      line-height:$headerHeight
      text-align:center
      color:#fff
      background:$bgColor
      font-size:16px
   .header-back
     position:absolute
     top:0
     left:0
     color:#fff
     width:32px
     text-align:center
     font-size: 20px
</style>